.category {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.search {
    height: 88rpx;
    padding: 0 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
}
.search-content {
    width: 690rpx;
    height: 56rpx;
    background: #ededed;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-content lable {
    display: inline-block;
}
.search-icon {
    background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png') center no-repeat;
    background-size: 100%;
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
}
.category-main {
    flex: 1;
    background: #fff;
    display: flex;
}
.main-left {
    width: 162rpx;
    height: 100%;
    text-align: center;
}
.left-title {
    text-align: center;
    line-height: 90rpx;
    width: 162rpx;
    height: 90rpx;
    color: #333;
    font-size: #333;
    border-left: 6px solid #fff;
}
.active {
    color: #ab2b2b;
    font-size: 36rpx;
    border-left: 6px solid #ab2b2b;
}
.main-right {
    flex: 1;
    border-left: 1px solid #fafafa;
    height: 100%;
    padding: 0 30rpx 0 30rpx;
}
.banner {
    width: 100%;
    height: 222rpx;
    margin-top: 20rpx;
}
.banner image {
    width: 100%;
    height: 100%;
}
.right-title {
    text-align: center;
    padding: 50rpx 0;
}
.right-title label:nth-child(2) {
    font-size: 24rpx;
    color: #333;
    padding: 0 10rpx;
}
.right-title label:nth-child(2n + 1) {
    color: #999;
}
.right-content {
    display: flex;
    flex-wrap: wrap;
}
.content-item {
    width: 33.33%;
    text-align: center;
    margin-bottom: 20rpx;
}
.content-item image {
    height: 144rpx;
    width: 144rpx;
    display: block;
    margin: 0 auto;
}